---
title: एडिटर सेटअप
description: Astro के साथ निर्माण के लिए अपना एडिटर अपने सेटअप करें।
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import ReadMore from '~/components/ReadMore.astro';
import Badge from "~/components/Badge.astro"
import { Steps } from '@astrojs/starlight/components';

Astro डेवलपर अनुभव को बेहतर बनाने एवं नई सुविधाओं को आज़माने के लिए अपने कोड एडिटर को अनुकूलित करें।

## VS Code

[VS Code](https://code.visualstudio.com/) वेब डेवलपर्स के लिए Microsoft द्वारा निर्मित एक लोकप्रिय कोड एडिटर है। VS Code इंजन [GitHub Codespaces](https://github.com/features/codespaces) एवं [Gitpod](https://gitpod.io/) जैसे लोकप्रिय इन-ब्राउज़र कोड एडिटर को शक्ति प्रदान करता है।

Astro किसी भी कोड एडिटर के साथ काम करता है। हालाँकि, Astro परियोजनाओं के लिए VS Code हमारा अनुशंसित एडिटर है। हम एक [आधिकारिक Astro VS Code एक्सटेंशन](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) संभालके रखते हैं जो Astro परियोजनाओं के लिए कई प्रमुख विशेषताओं एवं डेवलपर अनुभव सुधारों को अनलॉक करता है।

- `.astro` फ़ाइलों के लिए सिंटैक्स हाइलाइटिंग।
- `.astro` फ़ाइलों के लिए Typescript प्रकार की जानकारी।
- कोड पूर्णता, संकेत एवं अधिक के लिए [VS Code Intellisense](https://code.visualstudio.com/docs/editor/intellisense)।

आरंभ करने के लिए, आज ही [Astro VS Code एक्सटेंशन](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) इंस्टॉल करें।

<ReadMore>देखें कि अपने Astro परियोजना में [Typescript कैसे सेट](/hi/guides/typescript/) करें।</ReadMore>

## Zed

[Zed](https://zed.dev/)  एक ओपन-स्त्रोत कोड एडिटर है जिसने संस्करण 0.123.2 में Astro के लिए समर्थन जोड़ा गया है। आप [Astro एक्सटेंशन](https://github.com/zed-industries/zed/tree/main/extensions/astro) को Zed के IDE एक्सटेंशन टैब में से इंस्टॉल कर सकते हैं। इस एक्सटेंशन में सिंटैक्स हाइलाइटिंग, कोड पूर्णता और फ़ॉर्मेटिंग जैसी सुविधाएं शामिल हैं।

## JetBrains IDEs

Astro के लिए प्रारंभिक समर्थन WebStorm 2023.1 में आया। आप [JetBrains Marketplace](https://plugins.jetbrains.com/plugin/20959-astro) के माध्यम से या IDE के प्लगइन्स टैब में "Astro" खोजकर आधिकारिक प्लगइन इंस्टॉल कर सकते हैं। इस प्लगइन में सिंटैक्स हाइलाइटिंग, कोड पूर्णता एवं फ़ॉर्मेटिंग जैसी सुविधाएं शामिल हैं, एवं भविष्य में और भी उन्नत सुविधाएं जोड़ने की योजना है। यह [JavaScript समर्थन के साथ अन्य सभी JetBrains IDE](https://www.jetbrains.com/products/#lang=js&type=ide) के लिए भी उपलब्ध है।


## अन्य कोड एडिटर

हमारा अद्भुत समुदाय अन्य लोकप्रिय एडिटर के लिए कई एक्सटेंशन बनाए रखती है, जिनमें शामिल हैं:

- [VS Code Extension on Open VSX](https://open-vsx.org/extension/astro-build/astro-vscode) <span style="margin: 0.25em;"><Badge text="अधिकारी" /></span> - आधिकारिक Astro VS Code एक्सटेंशन, [VSCodium](https://vscodium.com/) जैसे ओपन प्लेटफार्मों के लिए ओपन VSX रजिस्ट्री पर उपलब्ध है।
- [Nova Extension](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="समुदाय" /></span> - Nova के अंदर Astro के लिए सिंटैक्स हाइलाइटिंग एवं कोड पूर्णता प्रदान करता है
- [Vim प्लगइन](https://github.com/wuelnerdotexe/vim-astro) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="समुदाय" /></span> - Vim या Neovim के अंदर Astro के लिए सिंटैक्स हाइलाइटिंग, इंडेंटेशन एवं कोड फोल्डिंग समर्थन प्रदान करता है
- Neovim [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#astro) एवं [TreeSitter](https://github.com/virchau13/tree-sitter-astro) प्लगइन <span style="margin: 0.25em;"><Badge class="neutral-badge" text="समुदाय" /></span> - Neovim के अंदर Astro के लिए सिंटैक्स हाइलाइटिंग, TreeSitter पार्सिंग एवं कोड पूर्णता प्रदान करता है
- Emacs <span style="margin: 0.25em;"><Badge class="neutral-badge" text="समुदाय" /></span> - Astro के साथ काम करने के लिए [Emacs एवं Eglot को कॉन्फ़िगर](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0) करने के निर्देश देखें
- [Sublime Text के लिए Astro सिंटैक्स हाइलाइटिंग](https://packagecontrol.io/packages/Astro) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="समुदाय" /></span> - Sublime Text के लिए Astro पैकेज, Sublime Text पैकेज मैनेजर पर उपलब्ध है

## इन-ब्राउज़र एडिटर

स्थानीय एडिटर के अलावा, Astro ब्राउज़र में होस्ट किए गए एडिटर पर भी अच्छा चलता है, जिनमें शामिल हैं:

- [StackBlitz](https://stackblitz.com/) एवं [CodeSandbox](https://codesandbox.io/) - ऑनलाइन एडिटर जो आपके ब्राउज़र में चल सकते हैं, `.astro` फ़ाइलों के लिए अंतर्निहित सिंटैक्स हाइलाइटिंग समर्थन के साथ। किसी इंस्टालेशन या कॉन्फ़िगरेशन की आवश्यकता नहीं!
- [GitHub.dev](https://github.dev/) - आपको Astro VS Code एक्सटेंशन को एक [वेब एक्सटेंशन](https://code.visualstudio.com/api/extension-guides/web-extensions) के रूप में इंस्टॉल करने की अनुमति देता है, जो आपको केवल कुछ पूर्ण एक्सटेंशन सुविधाओं तक पहुंच प्रदान करता है। वर्तमान में, केवल सिंटैक्स हाइलाइटिंग समर्थित है।
- [Gitpod](https://gitpod.io/) - क्लाउड में एक पूर्ण विकास वातावरण जो ओपन VSX से आधिकारिक Astro VS Code एक्सटेंशन इंस्टॉल कर सकता है।

## अन्य उपकरण

### ESLint

[ESLint](https://eslint.org/) JavaScript एवं JSX के लिए एक लोकप्रिय लिंटर है। Astro समर्थन के लिए, [एक समुदाय अनुरक्षित प्लगइन](https://github.com/ota-meshi/eslint-plugin-astro) इंस्टॉल किया जा सकता है।

अपने परियोजना के लिए ESLint को कैसे इंस्टॉल एवं सेटअप करें, इसके बारे में अधिक जानकारी के लिए [परियोजना की उपयोगकर्ता मार्गदर्शिका](https://ota-meshi.github.io/eslint-plugin-astro/user-guide/) पढ़े।

### Stylelint

[Stylelint](https://stylelint.io/) एक लोकप्रिय लिंटर है CSS के लिए। [एक समुदाय द्वारा अनुरक्षित स्टाइललिंट कॉन्फ़िगरेशन](https://github.com/ota-meshi/stylelint-config-html) Astro समर्थन प्रदान करता है।

इंस्टॉलेशन निर्देश, संपादक एकीकरण एवं अतिरिक्त जानकारी परियोजना के README में पाई जा सकती है।

### Prettier

[Prettier](https://prettier.io/) JavaScript, HTML, CSS और अन्य के लिए एक लोकप्रिय फ़ॉर्मेटर है। यदि आप [Astro VS Code एक्सटेंशन](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) या किसी [अन्य एडिटर के भीतर Astro भाषा सर्वर](#अन्य-कोड-एडिटर) का उपयोग कर रहे हैं, तो Prettier के साथ कोड फ़ॉर्मेटिंग शामिल है।

एडिटर के बाहर (उदाहरण के लिए CLI) या एडिटर के अंदर जो हमारे एडिटर टूलींग का समर्थन नहीं करते हैं, `.astro` फ़ाइलों को फ़ॉर्मेट करने के लिए समर्थन जोड़ने के लिए, आधिकारिक Astro Prettier प्लगइन इंस्टॉल करें।

<Steps>
1. `prettier` और `prettier-plugin-astro` इंस्टॉल करें।

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install --save-dev prettier prettier-plugin-astro
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add -D prettier prettier-plugin-astro
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add --dev prettier prettier-plugin-astro
      ```
      </Fragment>
    </PackageManagerTabs>

2. अपने परियोजना के मूल में `.prettierrc.mjs` कॉन्फ़िगरेशन फ़ाइल बनाएं और उसमें `prettier-plugin-astro` जोड़ें।

    इस फ़ाइल में, Astro फ़ाइलों के लिए पार्सर को नियमावली रूप से निर्दिष्ट करें।

    ```js title=".prettierrc.mjs"
    /** @type {import("prettier").Config} */
    export default {
      plugins: ['prettier-plugin-astro'],
      overrides: [
        {
          files: '*.astro',
          options: {
            parser: 'astro',
          },
        },
      ],
    };
    ```

3. अपनी फ़ाइलों को फ़ॉर्मेट करने के लिए टर्मिनल में `prettier . --write` कमांड चलाएँ।

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npx prettier . --write
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm exec prettier . --write
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn prettier . --write
      ```
      </Fragment>
    </PackageManagerTabs>
</Steps>

इसके समर्थित विकल्पों, VS Code के अंदर Prettier कैसे सेट करें, आदि के बारे में अधिक जानकारी के लिए [Prettier प्लगइन का README](https://github.com/withastro/prettier-plugin-astro/blob/main/README.md) देखें।
